@import 'leaflet/control/_HazDevLayers.scss';
@import 'leaflet/control/_Attribution.scss';
@import 'leaflet/control/_Scale.scss';
@import 'leaflet/control/_Control.scss';

/* TODO, remove once DetailView(s) are complete */

.detail-download-view,
.detail-summary {
  background-color: #fafafa;
  border: 1px solid #ededed;
  margin: 1em 0;
  padding: 1em;

  > :first-child {
    margin-top: 0.5em;
  }

  > :last-child {
    margin-bottom: 0.5em;
  }
}

.detail-map {
  height: 50em;
}

.detail-map-image {
  max-width: 800px
}

.detail-summary-list dd {
  margin: 0 0 0.5em;
}

.summary-map-view {
  height: 45em;
  margin: 2em 0 1em;
}

.leaflet-control-container > .leaflet-bottom {

  > .leaflet-control-scale {
    margin: 0 0 0 10px;
  }

  > .leaflet-control-attribution {
    position: absolute;
  }
}

.detail-map-view {
  position: relative;

  > .legend {
    margin: 1em 0;
  }
}

@media screen and (min-width: 768px) {
  .detail-map-view > .legend {
    position: absolute;
    bottom: 15px;
    right: 0;
    width: 14em;
    margin: 0;
  }
}
